<template>
    <div>
      <!-- 面包屑导航条 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/toOneList' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据中心</el-breadcrumb-item>
        <el-breadcrumb-item>联系人管理</el-breadcrumb-item>
        <el-breadcrumb-item>联系人修改</el-breadcrumb-item>
      </el-breadcrumb>
      <!--标题-->
      <el-row class="box2">
        <h1 class="title">修改界面</h1>
      </el-row>
      <!--中间间隔-->
      <el-row class="box"></el-row>
      <el-card class="box-card">
        <el-form :model="roleForms" status-icon :rules="rules" >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="roleForms.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <br> <br>
              <el-form-item label="性别">
                <el-radio v-model="roleForms.sex" :label="1">男</el-radio>
                <el-radio v-model="roleForms.sex" :label="2">女</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="电话号码" prop="phone">
                <el-input v-model="roleForms.tel"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="roleForms.email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="邮件地址" prop="recvAddress">
                <el-input v-model="roleForms.recvAddress"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职位" prop="position">
                <el-input v-model="roleForms.position"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="客户" >
                <el-select v-model="roleForms.customerId" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="描述" prop="remarks">
                <el-input type="textarea" :rows="4" placeholder="请输入材料描述" v-model="roleForms.remarks"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-button @click="save()" plain type="info">修改</el-button>
          <el-button @click="reset()" type="primary">重置</el-button>
          <el-button @click="goback()" type="primary">返回</el-button>
        </el-form>
      </el-card>
    </div>
</template>

<script>
  export default {
    name: 'LinkAdd',
    data(){
      return{
        options:[],
        roleForms:{},
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
          ],
          phone: [
            { required: true, message: '请输入电话', trigger: 'blur' },
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
          ],
          recvAddress: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          ],
          position: [
            { required: true, message: '请输入职位', trigger: 'blur' },
          ],
          remarks: [
            { required: true, message: '请输入描述', trigger: 'blur' },
          ]
          }
      }
    },
    methods:{
      save(){
        this.$http.post("/link/saves",this.roleForms).then((res)=>{
          if(res.data.success){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          }else {
            this.$message.error(res.data.message);
          }
          this.$router.push('/linkMan');
        })
      },
      goback(){//返回
        this.$router.push('/linkMan');
      },
      reset(){//重置
        this.roleForms={};
      },
      getCust:function () {
        this.$http.get("/customer/getCustom").then((res)=>{
          this.options=res.data.result
        })
      },
      getById:function (a) {
        this.$http.post("/link/getOne/"+a).then((res)=>{
          this.roleForms=res.data.result
        })
      }
    },
    created () {
      this.getCust()
        var id =this.$route.query.id
      this.getById(id)
    }
  }
</script>

<style scoped>
  /*.box-card {*/
  /*  width: 600px;*/
  /*}*/
  .box2{/*添加界面的样式*/
    height: 80px;
    border-radius: 40px;
  }
  .box-card{/*列表的样式*/
    border-radius: 30px;
  }
  .box{/*中间的间隔*/
    height: 20px;
    background-color: #eaedf1;
  }
  .title{
    line-height:2.3px;
    text-align: center;
  }
</style>
